<template>
  <div class="login">
    <h1>Edu boss管理系统</h1>

    <!-- <el-form
      class="form bgfff"
      :model="formModel"
      ref="ruleform"
      label-position="left"
    > -->
    <h2>登录</h2>
    {{ form.phone.value }}{{ form.psw.value }}
    <FormItem label="手机号" required :errMsg="errs['phone']?.value">
      <input type="text" v-model="form.phone.value" />
      <el-input
        v-model.number="form.phone.value"
        placeholder="请输入手机号"
      ></el-input>
    </FormItem>
    <FormItem label="密码" required :errMsg="errs['psw']?.value">
      <el-input
        v-model="form.psw.value"
        type="password"
        placeholder="请输入密码"
      ></el-input>
    </FormItem>
    <el-button
      type="primary"
      @click="handleSubmit"
      :disabled="loading.value"
      style="width: 100%"
      >登录</el-button
    >
    <!-- </el-form> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import FormItem from "@/components/FormItem.vue";
import { toRaw } from "vue";
import { useRules } from "@/utils/rules";
import Schema from "async-validator";
export default defineComponent({
  name: "login",
  components: { FormItem },
  setup(props) {
    let _form = toRefs(
      reactive({
        phone: <string>"",
        psw: <string>"",
      })
    );
    function useForm(
      formKey: string,
      formVal: object,
      validateProp: string[]
    ): object {
      // let ruleform = ref(null);
      let loading = ref(false);
      let errs = toRefs(reactive(<any>{}));
      const descriptor = useRules(validateProp);
      const validator = new Schema(descriptor);
      const tmpObj = toRaw(formVal);
      console.log(errs);

      async function handleSubmit(): Promise<void> {
        // console.log(ruleform);
        // let bool = await ((ruleform.value as unknown) as Form).validate();
        let bool = await new Promise((res: Function, rej: Function) => {
          validator.validate(
            tmpObj,
            (errors: string[], fields: string[]): void => {
              if (errors) {
                errors.forEach((err: any, index: number) => {
                  errs[err.field] = ref(err.message);
                });
                res(false);
              } else {
                res(true);
              }
              // validation passed
            }
          );
        });

        console.log(errs, bool);

        if (bool) {
          loading.value = true;
        }
      }
      return {
        [formKey]: formVal,
        handleSubmit,
        loading,
        errs,
      };
    }

    return {
      ...useForm("form", _form, ["phone", "psw"]),
    };
  },
});
</script>

<style lang="scss" scoped>
.login {
  width: 95%;
  max-width: 22rem;
  margin: 1rem auto;
  .form {
    margin-bottom: 2.5rem;
    padding: 1.875rem 1.25rem;
    h2 {
      text-align: left;
      margin: 0 0 1rem;
      font-weight: 400;
      font-size: 1.5rem;
    }
  }
}
</style>